<template>
  <div class="van-cascader-dict">
    <van-cascader-dict :showValueFun="showValueFun" :fieldNames="{text: 'areaName', value: 'id'}" @dictChange="handleChange" label="地区(基础用法)" label-width="110px" title="地区选择" input-align="right"  dictType="CITY" placeholder="请选择地区" v-model="value1" ></van-cascader-dict>
    <van-cascader-dict :keyValue="true" :fieldNames="{text: 'areaName', value: 'id'}" @dictChange="handleChange" label="地区(过滤数据1)"  label-width="110px" title="地区选择" input-align="right"  :dictType="{type: 'city', filters: '35062403', reverse: true}" placeholder="请选择地区" v-model="value2" ></van-cascader-dict>
    <van-cascader-dict :fieldNames="{text: 'areaName', value: 'id'}" @dictChange="handleChange" label="地区(过滤数据2)" :filterDataFun="filterDataFun" label-width="110px" title="地区选择" input-align="right"  :dictType="{type: 'city', filters: '35062403', reverse: true}" placeholder="请选择地区" v-model="value3" ></van-cascader-dict>
    <van-cascader-dict :fieldNames="{text: 'areaName', value: 'id'}" @dictChange="handleChange" label="地区(禁用数据1)" label-width="110px" title="地区选择" input-align="right" :disableObj="{disableValue: '35062303', reverse: false}" :dictType="'city'" placeholder="请选择地区" v-model="value4" ></van-cascader-dict>
    <van-cascader-dict :fieldNames="{text: 'areaName', value: 'id'}" @dictChange="handleChange" label="地区(禁用数据2)" :disabledDataFun="disabledDataFun" label-width="110px" title="地区选择" input-align="right"  :dictType="'city'" placeholder="请选择地区" v-model="value5" ></van-cascader-dict>
    <van-cascader-dict :fieldNames="{text: 'areaName', value: 'id'}" @dictChange="handleChange" label="地区(禁用+过滤)" label-width="110px" title="地区选择" input-align="right" :dictType="{type: 'city', filters: '35062303', reverse: true}" :disableObj="{disableValue: '35062403,35062303'}"  placeholder="请选择地区" v-model="value6" ></van-cascader-dict>
    <van-cascader-dict :fieldNames="{text: 'areaName', value: 'id'}" @dictChange="handleChange" label="地区(禁用+过滤)" label-width="110px" title="地区选择" input-align="right" :dictType="{type: 'city', filters: '35062303', reverse: true}" :disableObj="{disableValue: '35062403'}"  placeholder="请选择地区" v-model="value7" ></van-cascader-dict>
    <van-cascader-dict :fieldNames="{text: 'areaName', value: 'id'}" @dictChange="handleChange" label="地区(最大层级)" :maxLevel="2" :finish="true" label-width="110px" title="地区选择" input-align="right" :dictType="'city'"  placeholder="请选择地区" v-model="value8" ></van-cascader-dict>
    <van-cascader-dict :fieldNames="{text: 'areaName', value: 'id'}" @dictChange="handleChange" label="地区(最小层级)" minSelectLevel="3" label-width="110px" title="地区选择" input-align="right" dictType="CITY"  placeholder="请选择地区" v-model="value9" ></van-cascader-dict>
    <van-cascader-dict :fieldNames="{text: 'areaName', value: 'id'}" @dictChange="handleChange" label="地区(配置提示)" tips="请选择最后一级" :minSelectLevel="3" label-width="110px" title="地区选择" input-align="right" :dictType="'city'"  placeholder="请选择地区" v-model="value10" ></van-cascader-dict>
    <van-cascader-dict :fieldNames="{text: 'areaName', value: 'id'}" @dictChange="handleChange" label="地区(直接选中)" label-width="110px" :finish="true" title="地区选择" input-align="right" :dictType="'city'"  placeholder="请选择地区" v-model="value11" ></van-cascader-dict>
    <van-cascader-dict :fieldNames="{text: 'areaName', value: 'id'}" @dictChange="handleChange" label="地区(提示文案)" label-width="110px" title="地区选择" input-align="right" cascaderPlaceholder="选择吧" :dictType="'city'"  placeholder="请选择地区" v-model="value12" ></van-cascader-dict>
    <van-cascader-dict :fieldNames="{text: 'areaName', value: 'id'}" @dictChange="handleChange" label="地区(按钮文字)" label-width="110px" title="地区选择" input-align="right" cancelButtonText="关闭" confirmButtonText="选中" :dictType="'city'"  placeholder="请选择地区" v-model="value13" ></van-cascader-dict>
    <van-cascader-dict :fieldNames="{text: 'areaName', value: 'id'}" @dictChange="handleChange" label="地区(间隔符)" label-width="110px" title="地区选择" input-align="right" spacer="," :dictType="'city'"  placeholder="请选择地区" v-model="value14" ></van-cascader-dict>
    <van-cascader-dict :fieldNames="{text: 'areaName', value: 'id'}" @dictChange="handleChange" label="地区(keyvalue)" :keyValue="true" label-width="110px" title="地区选择" input-align="right" :dictType="'city'"  placeholder="请选择地区" v-model="value15" ></van-cascader-dict>
    <van-cascader-dict :fieldNames="{text: 'areaName', value: 'id'}" @dictChange="handleChange" label="地区(赋值)"  dictType="CITY"  label-width="110px" title="地区选择" input-align="right"  placeholder="请选择地区" v-model="value19" ></van-cascader-dict>
    <van-cascader-dict :fieldNames="{text: 'deptName', value: 'deptId', children: 'children'}" keyValue @dictChange="handleChange" label="(自定义数据3)" :props="props" :treeData="areaTreeData" label-width="110px" title="地区选择" input-align="right"  placeholder="请选择地区" v-model="value20" ></van-cascader-dict>
    <van-cascader-dict delChildren :fieldNames="{text: 'deptName', value: 'deptId', children: 'children'}" @dictChange="handleChange" label="(自定义数据4赋值)" :props="props" :treeData="areaTreeData" label-width="110px" title="地区选择" input-align="right"  placeholder="请选择地区" v-model="value21" ></van-cascader-dict>
 </div>
</template>

<script>
import {getDictObjByDictTypes} from "vue2-vant-dict"
export default {
  data() {
    return {
      areaTreeData: [
        {
          "deptId": "108",
          "parentId": "102",
          "deptName": "厦门分公司",
          "children": [
            {
              "deptId": "110",
              "parentId": "108",
              "deptName": "卖场科",
              "children": []
            },
            {
              "deptId": "111",
              "parentId": "108",
              "deptName": "线路科",
              "children": []
            },
            {
              "deptId": "112",
              "parentId": "108",
              "deptName": "公关科",
              "children": []
            }
          ]
        },
        {
          "deptId": "109",
          "parentId": "102",
          "deptName": "福州分公司",
          "children": [
            {
              "deptId": "113",
              "parentId": "109",
              "deptName": "卖场科",
              "children": []
            }
          ]
        }
      ],
      value1: "",
      value2: "",
      value3: "",
      value4: "",
      value5: "",
      value6: "",
      value7: "",
      value8: "",
      value9: "",
      value10: "",
      value11: "",
      value12: "",
      value13: "",
      value14: "",
      value15: "21312421",
      value16: "",
      value17: "",
      value18: "350203",
      value19: "35062401",
      value20: "",
      value21: "0",
      list1: [],
      props: {
        text: "areaName",
        value: "id"
      }
    }
  },
  created() {
    getDictObjByDictTypes("country,area").then(data => {
      this.list1 = data.country
      // this.areaTreeData = listToTree(data.area)
    })
    setTimeout(() => {
      this.value21 = "112"
      this.value19 = "35062402"
    }, 2000)
  },
  methods: {
    showValueFun(targetArr, spacer) {
      return targetArr.map((option) => option.areaName).join(spacer+"~")
    },  
    handleChange(val) {
      console.log(val)
      console.log(this.value19, this.value21)
    },
    filterDataFun(list) {
      return list.filter(item => !["35062403"].includes(item.id))
    },
    disabledDataFun(item) {
      return ["35062403", "35062302"].includes(item.id)
    }
  }
}
</script>

<style>

</style>